<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3动画</title>
<style>
	#box{ width:100px; height:100px; background:red; 
		animation:1s move; animation-play-state:paused; }  
	@keyframes move{
		0%{ transform:translate(0,0); }
		100%{ transform:translate(100px,0); } 
	}
</style>
</head>
<body>
<input id="btn" type="button" value="播放">
<div id="box"></div><br>
</body>
<script>
var btn=document.getElementById('btn');
var box=document.getElementById('box');
var onoff=true; 
btn.onclick=function(){
	if(getComputedStyle(box).animationPlayState=='paused'){
		box.style.animationPlayState='running';
		this.value='暂停';	
	}
	else{
		box.style.animationPlayState='paused';
		this.value='播放';
	}
}
</script>
</html>
